<template>
	<view>
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="header_title">
			<view class="title_left">
				<u-avatar :src="'https://qyglapidev.xahengsoft.com'+userInfo.headIcon" size="120" @click="headImgUpload"></u-avatar>
			</view>
			<view class="title_right">
				<ul>
					<li>
						<p>{{userInfo.userName}}</p>
					</li>
					<li>
						<p>{{userInfo.userAccount}}</p>
					</li>
					<li>
						<p>{{userInfo.organizeName}}</p>
					</li>
				</ul>
			</view>
		</view>
		<view class="features">
			<view class="features_list" @click="openPage('/pages/Password/Password')">
				<view class="list_left">
					<u-icon name="lock-fill" color="#3E9B97" size="24px"></u-icon>
					<p>修改密码</p>
				</view>
				<view class="list_right">
					<u-icon name="arrow-right" color="#cccccc" size="28"></u-icon>
				</view>
			</view>
			<!-- #ifdef APP-PLUS -->
			<view class="features_list" @click="checkUpdate">
				<view class="list_left">
					<u-icon name="download" color="#9CCEFF" size="24px"></u-icon>
					<p>检查更新</p>
				</view>
				<view class="list_right">
					<u-icon name="arrow-right" color="#cccccc" size="28"></u-icon>
				</view>
			</view>
			<view class="features_list">
				<view class="list_left">
					<u-icon name="setting-fill" color="#9CCEFF" size="24px"></u-icon>
					<p>当前版本{{version}}</p>
				</view>
				<view class="list_right">
					<u-icon name="arrow-right" color="#cccccc" size="28"></u-icon>
				</view>
			</view>
			<!-- #endif -->
		</view>
		<view class="features_list" @click="cancellation" style="background-color: #FFFFFF; margin-top: 10px;">
			<view class="list_left">
				<u-icon name="close-circle" color="#FF9CB3" size="25px"></u-icon>
				    <u-modal v-model="show" title="退出登录" content="是否确认要退出登录" :show-cancel-button="true" @confirm="confirm"></u-modal>
				<p>注销登录</p>
			</view>
			<view class="list_right">
				<u-icon name="arrow-right" color="#cccccc" size="28"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import {checkToUpdateAPP} from "../../utils/common.js"
	import { pathToBase64, base64ToPath } from 'image-tools'
	export default {
		data() {
			return {
				userInfo:{},
				version: '1.0',
				show:false
			}
		},
		methods: {
			getAppVersion(){
				let _self = this
				//#ifdef APP-PLUS
				plus.runtime.getProperty(plus.runtime.appid,(wgtinfo)=>{
					_self.version = wgtinfo.version
				})
				//#endif
				//#ifdef MP-WEIXIN
			　	const accountInfo = wx.getAccountInfoSync();
			　　this.version = accountInfo.miniProgram.version // 小程序 版本号
				//#endif
			},
			checkUpdate(){
				checkToUpdateAPP()
			},
			openPage(url) {
				this.$u.route({
					url: url
				})
			},
			cancellation(){
				this.show = true
			},
			confirm(){
				let companyCode = this.userInfo.F_CompanyCode
				uni.setStorageSync('companyCode',companyCode)
				uni.removeStorageSync('userInfo');
				uni.removeStorageSync('token');
				let url = "pages/login/login"
				this.$u.route(url)
			},
			async headImgUpload(){
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
					success: async (res) => {
						let file = res.tempFiles[0]
						pathToBase64(file.path)
						  .then(base64 => {
							  let params = base64.split(',')
							  this.$u.api.HeadImgUpload({fileBase64:params[1]}).then(resApi =>{
								  this.userInfo.F_HeadIcon = resApi
								  uni.setStorageSync('userInfo',this.userInfo)
							  })
						  })
						  .catch(error => {
							  console.log(error);
						  })
					}
				});
			}
		
		},
		onLoad() {
			
		},
		onShow() {
			this.getAppVersion()
			this.userInfo = uni.getStorageSync('userInfo')
		}
	}
</script>

<style>
	page {
		background-color: #F2F2F2;
	}
	/*  #ifdef  MP-WEIXIN  */
    .status_bar{
		height:35px;
	}
  /*  #endif  */
	.header_title {
		widht: 100%;
		height: 300rpx;
		background-color: #009688;
		display: flex;
		justify-content: start;
		align-items: center;
		padding: 0 45px;
	}

	.title_right {
		padding-left: 20px;
	}

	.title_right ul {
		list-style: none;
		padding: 0 0;
		color: #FFFFFF;
	}

	.title_right ul li:nth-child(1) {
		font-size: 20px;
		padding: 5px 0;
	}

	.title_right ul li:nth-child(2) {
		font-size: 12px;
		padding: 5px 0;
	}

	.title_right ul li:nth-child(3) {
		font-size: 12px;
		padding: 5px 0;
	}

	.features {
		width: 100%;
		height: auto;
		background-color: #FFFFFF;
		margin-top:15px;
	}

	.features_list {
		display: flex;
		justify-content: space-between;
		padding: 15px 15px;
		border-bottom: solid 1px #F1F1F1;
	}

	.list_left {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.list_left p {
		padding-left: 10px;
		font-size: 15px;
	}
</style>
